<template>
	<view class='u-p-20'>
		
		<view class="u-p-20 bg_FFFFFF u-b-r-10">
			<view class="u-flex" style="padding: 30rpx 0;border-bottom: 1rpx solid #E1E1E1FF;">				
				<view class="u-w-680">
					<u-input placeholder='手机号' v-model='mobile'></u-input>
				</view>
			</view>
			<view class="u-flex" style="padding: 30rpx 0;border-bottom: 1rpx solid #E1E1E1FF;">
				<view class="u-w-680 u-flex u-row-between">
					<u-input placeholder='验证码' v-model='code'></u-input>
					<view @click="getCode" class="cl_FF2D23FF u-font-26">
						{{tips}}
					</view>
				</view>
			</view>
			<view class="u-flex" style="padding: 30rpx 0;border-bottom: 1rpx solid #E1E1E1FF;">
				<view class="u-w-680">
					<u-input type='password' placeholder='支付密码(必须是数字)' v-model='tquepass' maxlength='6'></u-input>
				</view>
			</view>
		</view>

		<view class="u-w-710 u-h-100 u-l-h-100 u-text-center u-fix u-b-50 u-b-r-13 cl_FFF"
			style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="add">提交</view>
			<u-verification-code :seconds="60" ref="uCode"	@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				time: 59,
				asd: 1,
				mobile:'',
				tquepass:'',
				userinfo: '',
				code: '',
				tips:'获取验证码'
			}
		},
		onLoad(obj) {
			this.userinfo = uni.getStorageSync("userinfo")
			
		},
		methods: {
			// 验证码事件
			codeChange(text) {
				this.tips = text;
			},
			getCode(){
				if (this.mobile == '') {
					this.$u.toast('请输入手机号');
				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						setTimeout(() => {
							this.send_sms()
						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			// 验证码接口
			async send_sms() {
				let params = {
					mobile: this.mobile,
					type: 'trade',
					uuid:'',
					captcha:''
				}
				this.$api.sed_code(params,res=>{
					if (res.data.code === 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}
				})
				
			},
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				if (e.length == 6) {
					this.asd = 2
					this.code = e
				}
			},
			add() {
				if (this.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证吗'
					})
				} else if (this.tquepass == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入支付密码'
					})
				}else {
					this.$api.chnage_my_pay_password({
						mobile: this.mobile,
						code: this.code,
						tquepass: this.tquepass,
					}, res => {
						if(res.data.code==1){
							uni.showToast({
								icon:'none',
								title:'修改成功'
							})
							setTimeout(()=>{
							uni.navigateBack()
							},500)
							this.get_my_massage()
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					})
				}

			},
			// 个人资料更新
			async get_my_massage() {
				await this.$api.get_my_massage({}, res => {
					if (res.data.code == 1) {
						uni.setStorageSync('userinfo', res.data.data.data)
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
	}
</style>
